<template>
  <zm-view ref="view" @auth-success="handleRefresh">
    <view class="m-24 bg-white radius-12 overflow-hidden">
      <u-notice-bar
        direction="column"
        :icon-color="useColor('theme')"
        bg-color="#fffff"
        color="#666666"
        font-size="24rpx"
        :text="notices"
        mode="link"
        @click="showPopup = true"
      ></u-notice-bar>
    </view>
    <zm-list ref="list" :options="options" @query="handleQuery">
      <coupon v-for="item in list" :key="item.couponId" :info="item" show-type="detail" custom-class="mx-24 mb-20" :show-tag="false" @click="onClickCoupon"></coupon>
    </zm-list>
    <zm-footer background="#ffffff" safe-area>
      <view class="flex">
        <view class="flex flex-1 justify-center my-40 font-30 font-700 border-right" @click="toView('pages/person/coupon-invalid/coupon-invalid')">不可用</view>
        <view class="flex flex-1 justify-center my-40 font-30 font-700 text-theme" @click="toView({ url: 'pages/person/coupon-add/coupon-add', login: true, mobile: true })">添加优惠券</view>
      </view>
    </zm-footer>
    <!-- 公告内容 -->
    <zm-popup :show.sync="showPopup" mode="bottom" border-radius="16rpx">
      <view slot="header" class="p-24 font-32 font-bold text-center">券使用说明</view>
      <view class="px-35 pb-24 flex flex-col">
        <text v-for="(item, index) in notices" :key="index" class="notice-text"> {{ item }} </text>
      </view>
      <view class="p-24">
        <zm-button size="large" @click="showPopup = false">我知道了</zm-button>
      </view>
    </zm-popup>
    <!-- #ifdef WEB -->
    <view v-if="homeDisable" class="home-btn" @click="handleBackHome">
      <zm-icon name="wap-home-o" size="38rpx" :color="useColor('theme')"></zm-icon>
    </view>
    <!-- #endif -->
  </zm-view>
</template>
<script>
import page from "@/mixins/page"
import { useImage } from "@/utils/hook"
export default {
  mixins: [page],
  data() {
    return {
      list: [],
      total: 0,
      routes: [],
      options: {
        size: 15, // 分页大小
        auto: true, // 自动加载列表
        emptyText: "暂无可用优惠券",
        emptyImage: useImage("/zuimei-film-oss/1.0.0/empty/zwyhj-empty.png")
      },
      showPopup: false,
      notices: ["一张兑换券仅可支持一个座位兑换使用，若兑换金额不足抵扣电影票价时支持补差使用； ", "一笔电影订单最多使用一张满减券或无门槛券，具体电影券使用兑换规则可见券详情使用说明；"]
    }
  },
  onShow() {
    this.routes = getCurrentPages()
    this.handleShowTips()
  },
  onLoad() {
    this.handleOnEvent()
  },
  computed: {
    homeDisable() {
      return this.routes.length == 1
    }
  },
  methods: {
    handleOnEvent() {
      uni.$off("refreshCouponList")
      uni.$on("refreshCouponList", () => {
        this.$nextTick(() => {
          this.$refs.list?.refresh()
        })
      })
    },
    // 显示绑定提示
    handleShowTips() {
      const tips = uni.$getCache("couponBindTips")
      if (tips) {
        uni.$toast({ type: "success", content: tips })
        uni.$setCache("couponBindTips", null)
        this.$refs.list?.refresh()
      }
    },
    onClickCoupon(data) {
      this.toView({
        url: "pages/person/coupon-info/coupon-info",
        params: { couponId: data.couponId }
      })
    },
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await uni.$api.coupon.getCouponList({ page, pageSize, invalid: "1" })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        this.total = res.count
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    },
    handleBackHome() {
      uni.switchTab({
        url: "/pages/tabbar/tabbar-1/tabbar-1"
      })
    }
  }
}
</script>
<style scoped lang="scss">
.border-right {
  border-right: 2rpx solid #ccc;
}
.notice-text {
  color: #666;
  font-size: 26rpx;
  padding-left: 32rpx;
  line-height: 36rpx;
  margin-bottom: 45rpx;
  position: relative;

  &::after {
    left: 0;
    top: 12rpx;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    position: absolute;
    content: "";
    background-color: var(--theme-color);
  }
}
.home-btn {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  bottom: 20vh;
  left: 28rpx;
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
}
</style>
